<template>
  <section class="pt-120 pb-150">
    <div class="container">
      <div class="row">
        <div class="col-lg-8">
          <div class="blog-list-inner">
            <!-- single actives inner -->
            <div class="single-blog-inner" v-for="(item,index) in dataList" :key="index">
              <!-- actives image -->
              <div class="post-image">
                <nuxt-link :to="{name:'active-details',params:{id:item.id}}">
                  <img :src="item.img" alt="">
                </nuxt-link>
                <div class="post-date">
                  <p>{{ item.applyTime }}</p>
                </div>
              </div>
              <!--/.End of  actives image -->

              <!-- post content -->
              <div class="post-content">
                <div class="post-details">
                  <div class="post-title">
                    <h3>
                      <nuxt-link :to="{name:'active-details',params:{id:item.id}}">{{ item.title }}</nuxt-link>
                    </h3>
                    <p class="content-honour">{{ item.atext }}</p>
                  </div>
                  <!--                  <p v-html="item.atext"></p>-->
                  <nuxt-link class="btn" :to="{name:'active-details',params:{id:item.id}}">了解更多</nuxt-link>

                </div>
              </div><!-- /.End of post content -->
            </div>
          </div>

          <!-- actives pagination -->
          <ul class="theme-pagination pt-sans pagination align-items-center">
            <!--            上一页箭头-->
            <li @click="handleClickPre"><a><i class="fa fa-angle-left"></i></a></li>
            <!--            class="active"-->

            <li v-for="(item,index) in pageBarList" @click="handleChangePage(item)" :key="index"
                :class="[{'active':currentPage==item}]"><a href="#top">{{
                typeof (item) === "number" ? item : '...'
              }}</a></li>
            <!--            下一页箭头-->
            <li @click="handleClickNext"><a href="#top"><i class="fa fa-angle-right"></i></a></li>
          </ul>
          <!--End of actives pagination -->
        </div>

        <div class="col-lg-4">
          <aside>
            <!-- single sidebar widget -->
            <div class="single-sidebar-widget mb-30">
              <div class="search-bar-widget">
              </div>
            </div>
            <!--End of  single sidebar widget -->

            <!-- single sidebar widget -->
            <div class="single-sidebar-widget mb-30">
              <div class="sidebar-title">
                <nuxt-link to="current"><h5>了解更多</h5></nuxt-link>
              </div>
              <div class="sidebar-body latest-post">
                <ul>
                  <!-- single latest post -->
                  <li>
                    <div class="latest-post-wrap media">
                      <viewer>
                        <div class="latest-post-body media-body">
                          <img src="../static/assets/img/actives/annouce.jpg" alt="">
                        </div>
                      </viewer>
                    </div>
                  </li>
                  <!-- single latest post -->
                </ul>
              </div>
            </div>
            <!--End of  single sidebar widget -->
          </aside>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import {Api} from "@/request/Api";
//引入点击放大所需的依赖
import Viewer from 'v-viewer';
import 'viewerjs/dist/viewer.css';

//自定义配置
Viewer.setDefaults({
  Options: {
    'inline': true,
    'button': true,
    'navbar': true,
    'title': false,
    'toolbar': true,
    'tooltip': true,
    'movable': true,
    'zoomable': true,
    'rotatable': true,
    'scalable': true,
    'transition': true,
    'fullscreen': true,
    'keyboard': true,
    'url': 'data-source'
  }
})
export default {
  name: "active",
  data() {
    return {
      inputSearch: '',
      loading: false,
      currentDate: '2021-06-01',
      //加载动画
      fullscreenLoading: false,
      // 总的数据
      dataList: [
        {},
      ],
      // 每页显示数量
      pageSize: 6,
      // 总页数
      pageTotal: 1,
      // 当前页，默认第一页
      currentPage: 1,
      // 页码列表
      pageBarList: [1, 2, 3],
      params: {}
    }
  },
  created: function () {
    this.memberList();
  },
  methods: {
    //搜索
    onSubmitFunction(e) {
      console.log(e, this.inputSearch)
      this.params = {
        ownnerName: this.inputSearch,
        honorLevel: this.inputSearch,
        honorName: this.inputSearch,
      }
      this.memberList()
    },
    //加载
    openFullScreen1() {
      this.fullscreenLoading = true;
      setTimeout(() => {
        this.fullscreenLoading = false;
      }, 1000);
    },
    //上一页
    handleClickPre() {
      if (this.currentPage == 0) {
        alert("已到第一页！")
        return;
      } else {
        this.openFullScreen1()
        this.dataList = []
        this.fullscreenLoading = true;
        this.currentPage -= 1;
        this.memberList();
      }
    },
    //下一页
    handleClickNext() {

      if (this.currentPage == this.pageTotal) {
        alert("没有了哦")
        return;
      } else {
        this.dataList = []
        this.currentPage += 1;
        this.memberList();
        this.openFullScreen1()
      }
    },
    //点击到某一页
    handleChangePage(e) {
      this.dataList = []
      if (e === "前") {
        this.currentPage = this.currentPage - 1;
        this.pageBarList = this.calcPageNum()
      } else if (e === '后') {
        this.currentPage = this.currentPage + 1;
        this.pageBarList = this.calcPageNum()
      } else {
        this.currentPage = e;
      }
      this.memberList();
      this.openFullScreen1()
    },
    //获取分页
    async memberList() {
      let data = {
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }

      const result = await Api.getArticleList(data)
      if (result.code === 200) {
        let res = result.data.articleInfo;
        //后台拿到的数据
        this.pageTotal = res.pages
        //获取对应页数的内容
        this.dataList = res.records
        //调用页码数
        this.pageBarList = this.calcPageNum()
      }
      this.getSimpleText()
    },
    getSimpleText() {
      this.dataList.forEach(item => {
        //匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
        item.atext = item.atext.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi, '').replace(/<[^>]+?>/g, '').replace(/\s+/g, '').replace(/ /g, '').replace(/>/g, '').replace(/&nbsp;/g, '');
      })
    },
    calcPageNum() {
      let pageTotal = this.pageTotal;
      //获取最大页码数
      let cur = this.currentPage;
      //获取当前页码数
      if (pageTotal < 7) {
        //判断什么时候正常显示
        return pageTotal;
      } else {
        //出翔省略号
        if (cur < 4) {
          //判断当前的页码数是否小于4如果小于4 前四个正常显示，从第五个出现...
          return [1, 2, 3, 4, "后", pageTotal];
        } else if (cur > pageTotal - 4) {
          //判断是否在1后面出现...
          return [
            1,
            "前",
            pageTotal - 4,
            pageTotal - 3,
            pageTotal - 2,
            pageTotal - 1,
            pageTotal,
          ];
        } else {
          //两种情况都不存在就说明当前点击的中间的
          return [1, "前", cur - 1, cur, cur + 1, "后", pageTotal];
        }
      }
    }
  },
}
</script>
<style scoped>
.post-image img {
 height: 430px;
  object-fit: cover;
}
.content-honour {
  height: 210px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
}
</style>
